<template>
  <div class="analyse-list funnel-list">
    <template v-if="dataList.length">
      <ul class="list-wrap">
        <li
          class="list-item"
          :class="{ 'is-active': cust.tagId === selectAnalyse.tagId }"
          v-for="cust in dataList"
          :key="cust.tagId"
          @click="selectItem(cust)"
        >
          <icon-svg name="iconFunnel"></icon-svg>
          <span class="list-name elli">{{ cust.funnelAnalysisName }}</span>
        </li>
      </ul>
      <el-pagination
        style="text-align: right"
        :current-page="params.currentPageNum"
        :page-size="params.pageSize"
        background
        layout="total, prev, pager, next"
        :total="totalSize"
        :pager-count="5"
        small
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </template>
    <div class="no-record" v-else>暂无分析</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0,
      selectAnalyse: {}
    }
  },
  methods: {
    getList() {
      this.$ajax({
        url: this.$ajax.setUrl('funnelAnalysis/getFunnelInfo'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dataList = data.data.records
          this.totalSize = data.data.totalSize
          if (!this.selectAnalyse.tagId && data.data.records.length) this.selectItem(data.data.records[0])
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    handleCurrentChange(num) {
      this.params.currentPageNum = num
      this.getList()
    },
    selectItem(item) {
      this.selectAnalyse = item
      this.$emit('updateContent', Object.assign({}, item, { type: 'funnel' }))
    },
    handleDelete() {
      this.selectAnalyse = {}
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.funnel-list {
  .list-item {
    padding: 5px;
  }
}
</style>
